import { customPrivate } from '@/static-store'
import { reactive } from 'vue'
type ChartProp<T> = {
  x: number,
  y: number,
  max: number,
  map: Map<string, T>
}

export const useChartDef = () => {
  return {
    max: 0,
    x: 0,
    y: 0,
    map: new Map()
  }
}
export class BaseChart {
  public top: BaseChart | undefined | null = null
  public right: BaseChart | undefined | null = null
  public bottom: BaseChart | undefined | null = null
  public left: BaseChart | undefined | null = null
  public x = 0
  public y = 0
  constructor ({
    max = 10,
    x = 0,
    y = 0,
    map = new Map()
  }) {
    this.x = x
    this.y = y
    customPrivate.set(this, { x, y, max, map })
    this.setMap(`${x}-${y}`, this)
  }

  getMap (key: string) {
    const { map } = customPrivate.get(this)
    return map.get(key)
  }

  setMap (key: string, val: BaseChart | BaseChart[][]) {
    const { map } = customPrivate.get(this)
    return map.set(key, val)
  }

  getKeys () {
    const { map } = customPrivate.get(this)
    return map.keys()
  }
}
export class Chart extends BaseChart {
  public top: Chart | undefined | null = null
  public right: Chart | undefined | null = null
  public bottom: Chart | undefined | null = null
  public left: Chart | undefined | null = null
  constructor (prop: ChartProp<Chart>) {
    super(prop)
    const { x, y } = prop
    this.draw({ x, y })
  }

  draw ({ x, y }: {x: number, y: number}) {
    const { max, map } = customPrivate.get(this)
    if (x < 0 || y < 0 || x >= max || y >= max) {
      return
    }
    if (x + 1 < max) {
      if (!this.getMap(`${x + 1}-${y}`)) {
        this.setMap(`${x + 1}-${y}`, this)
        this.right = new Chart({ max, map, x: x + 1, y })
        this.setMap(`${x + 1}-${y}`, this.right)
      } else if (!this.right) {
        this.right = this.getMap(`${x + 1}-${y}`)
      }
    }
    if (y + 1 < max) {
      if (!this.getMap(`${x}-${y + 1}`)) {
        this.setMap(`${x}-${y + 1}`, this)
        this.bottom = new Chart({ max, map, x, y: y + 1 })
        this.setMap(`${x}-${y + 1}`, this.bottom)
      } else if (!this.bottom) {
        this.bottom = this.getMap(`${x}-${y + 1}`)
      }
    }
    if (x - 1 > 0) {
      if (!this.getMap(`${x - 1}-${y}`)) {
        this.setMap(`${x - 1}-${y}`, this)
        this.left = new Chart({ max, map, x: x - 1, y })
        this.setMap(`${x - 1}-${y}`, this.left)
      } else if (!this.left) {
        this.left = this.getMap(`${x - 1}-${y}`)
      }
    }
    if (y - 1 > 0) {
      if (!this.getMap(`${x}-${y - 1}`)) {
        this.setMap(`${x}-${y - 1}`, this)
        this.left = new Chart({ max, map, x, y: y - 1 })
        this.setMap(`${x}-${y - 1}`, this.left)
      } else if (!this.top) {
        this.top = this.getMap(`${x}-${y - 1}`)
      }
    }
  }
}

export function useChart (prop = {
  max: 10,
  x: 0,
  y: 0,
  map: new Map()
}) {
  const { x, y, max, map } = prop
  const myChart = new Chart({ max, map, x, y })
  myChart.setMap(`${x}-${y}`, myChart)
  const keys = [...Array.from(myChart.getKeys())]
  keys.forEach((key) => {
    const curChart = myChart.getMap(String(key))
    const [x1, y1] = String(key).split('-').map(Number)
    if (x1 - 1 >= 0) {
      curChart.left = myChart.getMap(`${x1 - 1}-${y1}`)
    }
    if (y1 - 1 >= 0) {
      curChart.top = myChart.getMap(`${x}-${y1 - 1}`)
    }
    if (x1 + 1 <= max) {
      curChart.right = myChart.getMap(`${x1 + 1}-${y1}`)
    }
    if (y1 + 1 <= max) {
      curChart.bottom = myChart.getMap(`${x1}-${y1 + 1}`)
    }
  })
  return myChart
}

export function useTwoChart (prop = {
  max: 10,
  map: new Map()
}) {
  const { max, map } = prop
  const twoAray: BaseChart[][] = Array.from({ length: max }).map((_, y) => Array.from({ length: max }).map((_, x) => new BaseChart({ y, x, map, max })))
  twoAray.forEach((arr, y1) => {
    arr.forEach((curChart, x1) => {
      if (x1 - 1 >= 0) {
        curChart.left = twoAray[y1][x1 - 1]
      }
      if (y1 - 1 >= 0) {
        curChart.top = twoAray[y1 - 1][x1]
      }
      if (x1 + 1 < max) {
        curChart.right = twoAray[y1][x1 + 1]
      }
      if (y1 + 1 < max) {
        curChart.bottom = twoAray[y1 + 1][x1]
      }
    })
  })
  const twoChart = twoAray[0][0]
  twoChart.setMap('list-map', twoAray)
  return twoChart
}
/**
 * 图列表
 */
export function useMapChart ({ max = 20, map = new Map() }) {
  const myTwoChart = useTwoChart({ max, map })
  console.log('myTwoChart', myTwoChart)
  const state = reactive({
    x: myTwoChart.x,
    y: myTwoChart.y
  })
  const DR_TYPE = {
    top: {
      type: 'top',
      label: '上'
    },
    bottom: {
      type: 'bottom',
      label: '下'
    },
    right: {
      type: 'right',
      label: '右'
    },
    left: {
      type: 'left',
      label: '左'
    }
  }
  const testArr = myTwoChart.getMap('list-map')
  const selectItem = (item: BaseChart) => {
    state.x = item.x
    state.y = item.y
  }
  const dr = (type: string) => {
    const curMyChart = myTwoChart.getMap(`${state.x}-${state.y}`)
    switch (type) {
      case DR_TYPE.top.type: {
        if (curMyChart.top) {
          state.y = curMyChart.top.y
          state.x = curMyChart.top.x
        }
        break
      }
      case DR_TYPE.bottom.type: {
        if (curMyChart.bottom) {
          state.y = curMyChart.bottom.y
          state.x = curMyChart.bottom.x
        }
        break
      }
      case DR_TYPE.right.type: {
        if (curMyChart.right) {
          state.y = curMyChart.right.y
          state.x = curMyChart.right.x
        }
        break
      }
      case DR_TYPE.left.type: {
        if (curMyChart.left) {
          state.y = curMyChart.left.y
          state.x = curMyChart.left.x
        }
        break
      }
    }
  }
  return {
    dr,
    selectItem,
    state,
    DR_TYPE,
    testArr
  }
}
